<template>
  <div class="mvs">
   <!-- tabs -->
   <div class="tabsall">
     <div>
       <span class="tabs">地区:</span>
       <span class="tabitem" :class="{active:(regionindex===index)}" @click="regionevent(index)" v-for="(item,index) in tabsinfo.region" :key="item">
         {{item}}
       </span>
     </div>
     <div>
       <span class="tabs">类型:</span>
        <span class="tabitem" :class="{active:(typesindex===index)}" @click="typesevent(index)" v-for="(item,index) in tabsinfo.types" :key="item">
         {{item}}
       </span>
     </div>
     <div>
       <span class="tabs">排序:</span>
        <span class="tabitem" :class="{active:(sortindex===index)}" @click="sortevent(index)" v-for="(item,index) in tabsinfo.sort" :key="item">
         {{item}}
       </span>
     </div>
     
   </div>
   <!-- mvs页面 -->
   <div class="mv">
     <div class="mvitem" v-for="item in listmvs" :key="item.id">
       <div class="image">
         <img :src="item.cover" @click="webmusic(item.id)">
       </div>
       <div class="content">
        <p class="name">{{item.name}}</p> 
        <p class="playcount">播放次数:{{item.playCount | thousand}}</p> 
       </div>
     </div>
   </div>
   <!-- 分页 -->
    <el-pagination
      @current-change="handleCurrentChange"
      background
      :page-size="5"
      layout="prev, pager, next"
      :total='1000'>
    </el-pagination>
  </div>
</template>

<script>
  export default {
    name:'mvs',
    data () {
      return {
        tabsinfo:{
          region:['全部','内地','港台','欧美'],
          types:['全部','官方版','原声','现场版'],
          sort:['上升最快','最热','最新']
        },
       regionindex:0,
       typesindex:0,
       sortindex:0,
       listmvs:[],
       area:'全部',
       type:'全部',
       order:'上升最快',
       offset:0
      }
    },
    filters: {
      thousand(number){
        if(number>10000){
          return (number/10000).toFixed(1) + '万'
        }else{
          return number
        }
      }
    },
    created () {
      this.firstmvsdata()
    },
    methods: {
      async firstmvsdata(){
        const res =await this.$http.get('mv/all',{params:{
          area:this.area,
          type:this.type,
          order:this.order,
          limit:12,
          offset:this.offset
        }})
        console.log(res)
        this.listmvs = res.data.data
      },
      regionevent(index){
       this.regionindex = index
       this.area = this.tabsinfo.region[index]
       this.firstmvsdata()
      },
      typesevent(index){
        this.typesindex = index
        this.type = this.tabsinfo.types[index]
        this.firstmvsdata()
      },
      sortevent(index){
        this.sortindex = index
        this.order = this.tabsinfo.sort[index]
        this.firstmvsdata()
      },
      handleCurrentChange(){
        this.offset +=12
        this.firstmvsdata()
      },
      webmusic(id){
        this.$router.push(`/mv?id=${id}`)
      }
    }
  }
</script>

<style lang="less" scoped>
  .mvs{
    margin: 80px 0 0 300px;
    .tabsall{
      .tabs{
        display: inline-block;
        margin-top: 20px;
        font-size: 19px;
        font-weight: bolder;
      }
      .tabitem{
        text-align: center;
        width: 90px;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        display: inline-block;
        padding: 0 10px;
      }
    }
    .mv{
      display: flex;
      flex-wrap: wrap;
      margin-top: 30px;
      .mvitem{
        position: relative;
        margin:20px 0 0 35px;
        width: 250px;
       .image{
         img{
        border-radius: 10px;
         width: 250px;
         height: 140px;
         }
        
       }
       .name{
         margin-top: 5px;
       }
       .playcount{
         font-size: 14px;
         position: absolute;
         bottom: 160px;
         left: 145px;
         color: #fff;
       }
      }
    }
    .el-pagination{
      margin: 50px 0  100px  300px;
    }
  }
   .active{
    
     width: 60px;
     height: 30px;
     color: #dd6d60;
     background-color: #fcf6f5;
     border-radius: 20px;

   }
</style>